<template>
  <div class="app-container" style="background:#f3f3f4">
    <el-container class="home">
      <el-main style="padding:0px;">
        <div style="height:111px">
          <a-card v-for="(item,index) in head" :key="index" class="box-card">
            <div style="width:20%;margin-left:10%;float:left">
              <a-image :src="item.img" width="45px" height="45px" />
            </div>
            <div style="float:left;width:65%;margin-left:5%;font-size:14px">
              <span class="head">{{ item.label }}</span>
            </div>
            <div class="span">{{ item.number }}</div>
          </a-card>
        </div>
        <div
          style="width:99%;height:180px;margin:20px 0 10px 0;background:#fff;border-radius:5px;color:rgb(51,51,51);"
        >
          <div style="height:40px;padding:14px 14px 0 14px ">
            <span style="float:left;font-size:16px;font-weight: bold;">常用功能</span>
            <i class="a-icon-edit" style="float:right" />
          </div>
          <div class="bodyContent">
            <div v-for="(item,index) in head2" :key="index" class="box-card2">
              <a href="#">
                <i
                  :style="{backgroundImage:'url(' +item.img+ ')',display:'block',float:'left', backgroundRepeat:'no-repeat',backgroundSize: 'cover',width:'32px',height:'36px'}"
                />
                <span style="margin:10px 15px">{{ item.label }}</span>
              </a>
            </div>
          </div>
        </div>
        <div style="width:99%;height:280px;">
          <div style="width:49%;float:left;margin-right:1%;background:#fff;height:280px;">
            <div style="height:40px;padding:15px 15px 15px 15px">
              <span style="float:left;font-size:16px;color:rgb(51,51,51);font-weight:bold;">资产情况</span>
              <i
                :style="{backgroundImage:'url('+img0+')',float:'left',width:'19px',height:'19px',marginTop:'3px',marginLeft:'5px'}"
              />
            </div>
            <div
              style="color:#676a6c;width:96%;background: #f4f7fe;height:30px;margin:10px 2%;padding:7px 10px 0 30px;font-size:15px;font-weight:bold"
            >
              <span style="font-size:1em;font-weight:bold;float:left">总资产</span>
              <span style="font-size:1em;font-weight:bold;float:right">{{ totalAsset }}元</span>
            </div>
            <div
              style="color:#676a6c;width:96%;height:200px;margin:0 2%;padding:10px 10px 0 10px;float:left;font-size:14px;font-weight:600"
            >
              <div style="float:left;width:50%;text-align:center">
                <a-image :src="img0" style="width:156px;height:156px" />
              </div>
              <div style="height:120px;float:right;width:48%;margin-left:8px;padding:15px 0 ">
                <div class="balance">
                  <i class="dot" style="background: #ed5565;" />
                  <span>账户余额</span>
                  <span style="float:right">{{ accountBalance }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #5050d6;" />
                  <span>库存总额</span>
                  <span style="float:right">{{ inventoryAmount }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #ba55d3;" />
                  <span>固定资产</span>
                  <span style="float:right">{{ fixedAssets }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #1ab394;" />
                  <span>应收欠款</span>
                  <span style="float:right">{{ receivableDebt }}元</span>
                </div>
                <div class="balance" style="color:red">
                  <i class="dot" style="background:#f8ac59;" />
                  <span>应付欠款</span>
                  <span style="float:right">{{ dealDebt }}元</span>
                </div>
              </div>
            </div>
          </div>
          <div style="width:50%;height:280px;float:left;background:#fff">
            <div style="height:40px;padding:15px 15px 15px 15px">
              <span style="font-size:16px;font-weight:bold;float:left;color:rgb(51,51,51)">生产统计</span>
              <i
                :style="{backgroundImage:'url('+img0+')',float:'left',width:'19px',height:'19px',marginTop:'3px',marginLeft:'5px'}"
              />
              <a-button size="mini" class="trend" :class="{default:show==3}" @click="queryYear">本年</a-button>
              <a-button
                class="trend"
                size="mini"
                :class="{default:show==2}"
                style="border-right: 1px solid #8f8f8f;"
                @click="queryLastMonth"
              >上月</a-button>
              <a-button
                size="mini"
                class="trend"
                :class="{default:show==1}"
                style="border-right: 1px solid #8f8f8f;"
                @click="queryMonth"
              >本月</a-button>
            </div>
            <div id="lineChart2" style="width:100%;height:240px;" />
          </div>
        </div>

        <div style="width:99%;height:280px;margin:10px 0">
          <div style="width:49%;float:left;margin-right:1%;background:#fff;height:280px;">
            <div style="height:40px;padding:15px 15px 15px 15px">
              <span style="float:left;font-size:16px;color:rgb(51,51,51);font-weight:bold;">库存分布</span>
              <i
                :style="{backgroundImage:'url('+img0+')',float:'left',width:'19px',height:'19px',marginTop:'3px',marginLeft:'5px'}"
              />
            </div>
            <div style="height:200px;padding:7px 0;width:100%">
              <div id="lineChart" style="width:100%;height:200px;" />
            </div>
          </div>
          <div style="width:50%;height:280px;float:left;background:#fff">
            <div style="height:40px;padding:15px 15px 15px 15px">
              <span style="font-size:16px;font-weight:bold;float:left;color:rgb(51,51,51)">出货达成</span>
              <i
                :style="{backgroundImage:'url('+img0+')',float:'left',width:'19px',height:'19px',marginTop:'3px',marginLeft:'5px'}"
              />
              <a-button size="mini" class="trend" :class="{default:show==3}" @click="queryYear">本年</a-button>
              <a-button
                class="trend"
                size="mini"
                :class="{default:show==2}"
                style="border-right: 1px solid #8f8f8f;"
                @click="queryLastMonth"
              >上月</a-button>
              <a-button
                size="mini"
                class="trend"
                :class="{default:show==1}"
                style="border-right: 1px solid #8f8f8f;"
                @click="queryMonth"
              >本月</a-button>
            </div>
            <div id="lineChart3" style="width:100%;height:240px;" />
          </div>
        </div>
      </el-main>
      <el-aside width="300px">
        <div style="width:100%;height:260px;border-radius: 5px;padding:0 10px;background:#fff">
          <span style="margin:5px 10px;font-size:16px;font-weight:bold;">代办事项</span>
          <div class="asideOne">
            <i class="dot" style="background: #ed5565;margin: 11px 8px;" />
            <span>待审事项</span>
            <span class="asideRight">{{ accountBalance }}</span>
          </div>
          <div class="asideOne">
            <i class="dot" style="background: #1ab394;margin: 11px 8px;" />
            <span>待出入库</span>
            <span class="asideRight">{{ accountBalance }}</span>
          </div>
          <div class="asideOne">
            <i class="dot" style="background: #5050d6;margin: 11px 8px;" />
            <span>应收应付</span>
            <span class="asideRight">{{ accountBalance }}</span>
          </div>
          <div class="asideOne">
            <i class="dot" style="background: #f859d5;margin: 11px 8px;" />
            <span>客户跟进</span>
            <span class="asideRight" style="color:#676a6c">{{ accountBalance }}</span>
          </div>
          <div class="asideOne" style="border-bottom:none">
            <i class="dot" style="background: #f8ac59;margin: 11px 8px;" />
            <span>库存预警</span>
            <span class="asideRight">{{ accountBalance }}</span>
          </div>
        </div>
        <div
          style="width:100%;height:160px;border-radius: 5px;margin:10px 0 ;padding:0 10px;background:#fff"
        >
          <span style="margin:5px 10px;font-size:16px;font-weight:bold;">系统负责人</span>
          <div style="padding:0 10px;font-size:14px;color:rgb(153, 153, 153);">
            <span></span>
          </div>
        </div>
        <div
          style="width:100%;height:160px;border-radius: 5px;margin:10px 0 ;padding:0 10px;background:#fff"
        >
          <span style="margin:5px 10px;font-size:16px;font-weight:bold;">联系电话</span>
          <div style="padding:20 10px;font-size:14px;color:rgb(153, 153, 153);">
            <span>8208208820</span>
          </div>
        </div>
        <div
          style="width:100%;height:280px;border-radius: 5px;margin:10px 0 ;padding:0 10px;background:#fff"
        >
          <span style="margin:5px 10px;font-size:16px;font-weight:bold;" />
          <div style="padding:0 10px;font-size:14px;color:rgb(153, 153, 153);">
            <span />
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import one from '../img/one.png'
import two from '../img/two.png'
import three from '../img/three.png'
import four from '../img/four.png'
import img1 from '../img/销售订单.png'
import img2 from '../img/生产任务.png'
import img3 from '../img/BOM及工序.png'
import img4 from '../img/用料登记.png'
import img5 from '../img/产品管理.png'
import img6 from '../img/物料管理.png'
import img7 from '../img/成品入库.png'
import img8 from '../img/客户管理.png'
import round from '../img/round.png'
export default {
  name: 'Guide',
  data () {
    return {
      img0: round,
      head: [
        { label: '今日销售额', img: one, number: '200097.15' },
        { label: '今日销售毛利', img: two, number: '1927.23' },
        { label: '今日销售笔数', img: three, number: '3' },
        { label: '今日收款', img: four, number: '0.00' }
      ],
      head2: [
        { label: '销售订单', img: img1, path: '' },
        { label: '生产任务', img: img2, path: '' },
        { label: 'BOM及工序', img: img3, path: '' },
        { label: '用料登记', img: img4, path: '' },
        { label: '产品管理', img: img5, path: '' },
        { label: '物料管理', img: img6, path: '' },
        { label: '成品入库', img: img7, path: '' },
        { label: '客户管理', img: img8, path: '' }
      ],
      totalAsset: '0.00', // 总资产
      totalAmount: '0.00', // 库存总额
      accountBalance: '0.00', // 账户余额
      inventoryAmount: '0.00', // 库存余额
      fixedAssets: '0.00', // 固定资产
      receivableDebt: '0.00', // 应收欠款
      dealDebt: '0.00', // 应付欠款
      show: 1
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    // 查询生产统计本月
    queryMonth: function () {
      this.show = 1
    },
    // 查询生产统计上月
    queryLastMonth: function () {
      this.show = 2
    },
    // 查询生产统计本年
    queryYear: function () {
      this.show = 3
    },
    drawLine () {
      var echarts = require('echarts')
      const myCharts = echarts.init(document.getElementById('lineChart'))
      const myCharts2 = echarts.init(document.getElementById('lineChart2'))
      const myCharts3 = echarts.init(document.getElementById('lineChart3'))
      var option1 = {
        color: ['#ff81cb', '#87cefa'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          center: 'center',
          data: ['已入库', '未入库']
        },
        series: [
          {
            name: '已入库',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 83.7, name: '已入库' },
              { value: 26.3, name: '未入库' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      var option2 = {
        color: ['#032f5e', '#f01c70'],
        legend: {
          data: ['收入', '支出']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1日', '4日', '7日', '11日', '15日', '19日', '23日', '27日', '30日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '收入',
            type: 'bar',
            data: [3000, 4900, 3670, 2320, 2560, 7670, 1356, 1622, 5260],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '支出',
            type: 'bar',
            data: [2600, 1900, 3900, 2640, 1287, 2707, 1756, 1822, 4870],
            markPoint: {
              data: [
                { name: '月最高', value: 6400, xAxis: 10, yAxis: 6400 },
                { name: '月最低', value: 1260, xAxis: 10, yAxis: 6400 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      }
      var option3 = {
        color: ['#87cefc', '#da70d5'],
        legend: {
          data: ['已达成', '未达成']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1日', '4日', '7日', '11日', '15日', '19日', '23日', '27日', '30日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '已达成',
            type: 'bar',
            data: [30000, 43000, 38670, 12320, 22560, 37670, 41356, 51622, 25260],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '未达成',
            type: 'bar',
            data: [12800, 9900, 11900, 8640, 6287, 5707, 11756, 7822, 14870],
            markPoint: {
              data: [
                { name: '月最高', value: 6400, xAxis: 10, yAxis: 6400 },
                { name: '月最低', value: 1260, xAxis: 10, yAxis: 6400 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      }
      myCharts.setOption(option1)
      myCharts2.setOption(option2)
      myCharts3.setOption(option3)
    }
  }
}
</script>
<style scoped>
.home /deep/ .box-card {
  height: 111px;
  float: left;
  width: 24%;
  margin-right: 1%;
  padding-top: 15px;
}
.home /deep/ .box-card2 {
  height: 68px;
  width: 25%;
  float: left;
  padding-left: 40px;
}
.home /deep/ .a-card__body {
  padding: 0;
}
.bodyContent a {
  width: 100%;
  height: 78px;
  cursor: pointer;
  align-items: center;
  display: flex;
}

.asideRight {
  font-family: impact;
  font-weight: bold;
  font-size: 16px;
  color: red;
  float:right;
}
.box-card .head {
  background: #fff;
  border-radius: 5px;
  color: #999;
}
.box-card /deep/ .a-image {
  width: 45px;
  height: 45px;
}
.balance {
  height: 30px;
}
.bodyContent .a-image {
  width: 32px;
  height: 36px;
  margin-top: 15px;
}
.box-card .span {
  font-family: impact;
  font-weight: bold;
  clear: both;
  font-size: 30px;
  text-align: center;
  color: #676a6c;
}
.home /deep/ .a-main {
  padding: 0;
}
.default {
  color: #0a7dfa !important;
}
.dot {
  float: inherit;
  max-width: 12px;
  min-width: 12px;
  max-height: 12px;
  min-height: 12px;
  border-radius: 50%;
  margin: 2px 8px;
  float: left;
  display: block;
  margin-left: 5px;
}
.trend {
  float: right;
  width: 50px;
  background: #fff;
  color: #8f8f8f;
  border: hidden;
  cursor: pointer;
  border-radius: 0%;
  margin-top: -5px;
}
.home /deep/ .a-aside {
  padding: 0;
}
.asideOne {
  height: 45px;
  padding: 10px 5px;
  font-size: 14px;
  color: rgb(153, 153, 153);
  font-family: MicrosoftYaHei;
  border-bottom: 1px solid #f5f5f5;
}
</style>
